<template>
    <div class="coze-chat-container">
        <!-- 聊天窗口容器 -->
        <div id="chat-container"></div>
    </div>
</template>
  
<script>
import request from '../utils/request';
export default {
    name: 'CozeChat',
    data() {
        return {
            sdkLoaded: false, // SDK 是否已加载
            user_id: '', // 用户 ID
            user_name: '', // 用户昵称
            user_avatar: '', // 用户头像
        };
    },
    async mounted() {
        // 动态加载 Coze Web SDK 脚本
        await this.loadCozeSDK();
        // 初始化 Coze Chat Client
        this.initCozeChatClient();
    },
    methods: {
        // 动态加载 SDK 脚本
        loadCozeSDK() {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.1/libs/cn/index.js';
                script.onload = () => {
                    this.sdkLoaded = true;
                    resolve();
                };
                script.onerror = (error) => {
                    reject(new Error(`Failed to load SDK script: ${error.message}`));
                };
                document.head.appendChild(script);
            });
        },
        // 初始化 Coze Chat Client
        initCozeChatClient() {
            if (!this.sdkLoaded) {
                console.error('Coze Web SDK is not loaded yet');
                return;
            }

            const uid = sessionStorage.getItem('uid');
            const uidObj = JSON.parse(uid);

            request.get('/api/user/GetUserInfo', {
                params: {
                    uid: uidObj
                }
            }).then(res => {
                console.log(res.data);
                this.user_id = res.data.username; // 存储到组件的 data 中
                this.user_name = res.data.name;
                this.user_avatar = res.data.avatar;

                // 初始化 SDK
                new window.CozeWebSDK.WebChatClient({
                    config: {
                        bot_id: '7467127329295974409',
                    },
                    auth: {
                        type: 'token',
                        token: 'pat_UULhgiA3oGVbFx9ikd38zjoElFt4OmXdJr6HjOz2ExPGafZnZjIfT7QjDBB311ku',
                        onRefreshToken: async () => '',
                    },
                    userInfo: {
                        id: this.user_id, // 使用组件的 data 中的值
                        url: this.user_avatar,
                        nickname: this.user_name,
                    },
                    ui: {
                        base: {
                            icon: 'https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/Retail/coze.png',
                            layout: 'pc',
                            lang: 'en',
                            zIndex: 1000,
                        },
                        chatBot: {
                            title: 'AI助手叽叽',
                            uploadable: true,
                            width: 390,
                        },
                        asstBtn: {
                            isNeed: true,
                        },
                        footer: {
                            isShow: true,
                            expressionText: '吱吱农场 & Coze智能体',
                            linkvars: {
                                name: {
                                    text: 'A',
                                    link: 'https://www.test1.com',
                                },
                                name1: {
                                    text: 'B',
                                    link: 'https://www.test2.com',
                                },
                            },
                        },
                    },
                });
            }).catch(err => {
                console.error("获取用户信息失败", err);
            });
        },
    },
};
</script>
  
<style scoped>
.coze-chat-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
</style>